import React from 'react'
import {WhiteSpace, WingBlank} from "antd-mobile"
import './ScoreTimeLineCard.css'

const ScoreTimeLineCard = props => {
    const {
        home,
        away,
        goalD,
    } = props

    const homeGoalD = goalD && goalD.home && goalD.home.all && goalD.home.all.scored
    const awayGoalD = goalD && goalD.away && goalD.away.all && goalD.away.all.scored
    const homeTotal = homeGoalD && homeGoalD.reduce((a, b) => a + b[0], 0)
    const awayTotal = awayGoalD && awayGoalD.reduce((a, b) => a + b[0], 0)
    const data = {
        home: {
            name: home.name_zh,
            goals: homeGoalD,
            total: homeTotal,
        },

        away: {
            name: away.name_zh,
            goals: awayGoalD,
            total: awayTotal,
        }
    }

    const scoreTimeLineTemplate = (team, role) => {

        const scoreStyle = {
            width: '7%',
            color: role === 'host' ? '#FFA500' : '#999',
        }

        const blockStyle = goal => {
            let bg
            if (role === 'host') {
                if (goal > 0) {
                    bg = '#FF8100'
                } else {
                    bg = '#FFA500'
                }
            } else {
                if (goal > 0) {
                    bg = 'rgba(51,51,51,0.5)'
                } else {
                    bg = 'rgba(51,51,51,0.3)'
                }
            }
            return {
                height: '24px',
                width: '100%',
                color: '#fff',
                lineHeight: '24px',
                background: bg,
                textAlign: 'center',
            }
        }


        return (
            <div className='flex-space-between-align-center'>

                <div className='g-r-a-STL-team-name'>{team.name}</div>

                <div className='g-r-a-STL-team-block'>
                    <div style={scoreStyle}>
                        {team.total}
                    </div>

                    <div className='g-r-a-STL-team-half'>
                        {team.goals.slice(0, 3).map((match, index) => (
                            <div key={index} style={blockStyle(match[0])}>{match[0]}</div>
                            )
                        )}
                    </div>
                    <div className='g-r-a-STL-team-half'>
                        {team.goals.slice(3, 6).map((match, index) => (
                            <div key={index} style={blockStyle(match[0])}>{match[0]}</div>
                            )
                        )}
                    </div>

                </div>

            </div>
        )
    }


    // homeGoals && formatGoalLive(homeGoals)
    // awayGoals && formatGoalLive(awayGoals)
    const scoreTitle = (
        <WingBlank>
            <div className='flex-space-between-align-center'>
                <div className='game-room-analysis-title'>进球分布</div>
            </div>
        </WingBlank>
    )
    const containerStyle = {
        backgroundColor: "#fff",
    }
    const timeLine = (
        <div style={{display: 'flex',}}>
            <div style={{width: '42.5%',}}/>
            <div className='g-r-a-STLC-timeline'>
                <div className='g-r-a-STLC-timeline-time'>00'</div>
                <div className='g-r-a-STLC-timeline-time'>15'</div>
                <div className='g-r-a-STLC-timeline-time'>30'</div>
                <div className='g-r-a-STLC-timeline-time'>45'</div>
                <div className='g-r-a-STLC-timeline-time'>60'</div>
                <div className='g-r-a-STLC-timeline-time'>75'</div>
                <div className='g-r-a-STLC-timeline-time'>90'</div>
            </div>
        </div>
    )

    if (data.home && data.home.goals === undefined) return null
    return (
        <>
            <WhiteSpace/>
            {scoreTitle}
            <WhiteSpace/>
            <div
                style={containerStyle}
            >
                <WingBlank>
                    <WhiteSpace/>
                    {timeLine}
                    <WhiteSpace size='xs'/>
                    {data.home.goals && scoreTimeLineTemplate(data.home, 'host')}
                    <WhiteSpace size='xs'/>
                    {data.away.goals && scoreTimeLineTemplate(data.away, 'guest')}
                    <WhiteSpace/>
                </WingBlank>
            </div>
        </>
    )
}

export default ScoreTimeLineCard
